<template>
  <div>
    <el-row>
      <el-col :span="3">
        <tree-component style="margin-top:-52px" @GetNodeValue="GetNodeValue"></tree-component>
      </el-col>
      <el-col :span="20">
        <el-tabs type="border-card">
          <el-tab-pane label="事件处理">
            <el-tabs>
              <el-tab-pane label="待办事项">
                <el-row>
                  <el-col :span="24" style="margin-bottom:10px">
                    <div style="display:inline-block;float:right">
                      <el-input style="width:200px" v-model="filters.eventName" placeholder="事件名称"></el-input>
                      <el-input style="width:200px" v-model="filters.majorPersonName" placeholder="主要当事人"></el-input>
                      <el-select style="width:200px" v-model="filters.eventTypeValue" placeholder="事件类型">
                        <el-option v-for="(v,i) of EventType" :key="i" :label="v.eventTypeName" :value="v.eventTypeValue"></el-option>
                      </el-select>
                      <el-button type="primary" icon="search" @click="find">查询</el-button>
                      <el-button type="primary" @click="flush">
                        <i class="fa fa-refresh fa-spin"></i>刷新</el-button>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <el-table :data="needDealEvents" style="width: 100%" border highlight-current-row @current-change="handleCurrentChange">
                      <el-table-column type="index" width="50"></el-table-column>
                      <el-table-column prop="eventName" label="事件名称" align="center"></el-table-column>
                      <el-table-column prop="eventPlace" label="发生地点" align="center"></el-table-column>
                      <el-table-column prop="majorPersonName" label="主要当事人" align="center"></el-table-column>
                      <el-table-column prop="eventDate" label="发生时间" align="center"></el-table-column>
                      <el-table-column label="操作" align="center">
                        <template scope="scope">
                          <el-button @click="checkDetail(scope.row)" type="text">
                            查看详情</el-button>
                          <el-button type="text" @click="editEvent(scope.row.disputeEventID)">
                            编辑</el-button>
                          <el-button style="color:red" @click="remove(scope.row.disputeEventID)" type="text">
                            删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-col>
                  <el-col :span="24" style="margin-top:10px">
                    <el-pagination style="float:right" layout="prev, pager, next" :total="totalNeedDeal">
                    </el-pagination>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="已办结事项">

              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
          <el-tab-pane label="报表统计"></el-tab-pane>
          <el-tab-pane label="事件处理流程"></el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import * as api from "@/api/contradictionManage/index";
  import * as api2 from "@/api/zonghezhili/duiwujianshe";
  import treeComponent from "../../components/common/treeComponent";

  export default {
    components: {
      treeComponent: treeComponent
    },
    data() {
      return {
        filters: {
          eventName: null, // 事件名称
          majorPersonName: null, // 主要当事人
          eventTypeValue: null,
          netGridID: null,
          page: 1,
          pageSize: 10
        },
        defaultProps: {
          children: "children",
          label: "label"
        },
        needDealEvents: [
        {
            disputeEventID: "", //       bigint not null auto_increment,
            eventName: "", //             '事件名称',
            eventDate: "", //             '事件发生日期',
            eventPlace: "", //            '事件发生地点',
            evenScaleTypeValue: "", //    '事件规模',
            eventTypeValue: "", //        '事件类型编码',
            numberofJoinning: "", //      '涉及人数',
            eventIntroduction: "", //     '事件简述，不超2000字',
            relatedOrg: "", //            '涉及单位',
            majorPersonCertTypeCode: "", //'主要当事人证件代码类型，编码规范GA/T 517',
            majorPersonCertID: "", //     '主要当事人证件号码',
            majorPersonName: "", //       char(80),
            majorPersonSex: "", //        '主要当事人性别，编码符合GB/T 2261.1',
            majorPersonEthnicity: "", //  '主要当事人名族类别，详细见字典表',
            majorPersonEducation: "", //  '主要当事人学历类别，编码见表',
            majorPersonType: "", //       '主要当事人人员类别',
            majorPersonDetailAddress: "", //  '主要当事人居住详细地址',
            solvingDeadline: "", //      '化解时限',
            solvingMethodType: "", //    '化解方式，编码见 GBT 31000-2015文件之5.58',
            solvingManagment: "", //     '化解组织',
            solvingByPersonName: "", //   '化解责任人姓名',
            solvingByPersonContact: "", //'化解责任人联系方式，手机号或固定电话',
            isSuccessInSolving: "", //   '化解是否成功？值1表示成功，0表示不成功。',
            solvingIntroduction: "", //  '化解情况，不超2000字',
            evaluationDate: "", //       '考评日期，格式为YYYYMMDD',
            evaluationSuggestion: "", // '考评意见，不超2000字。',
            longitude: "", //            '地理经度信息，数字32，8',
            latitude: "", //             '地理纬度信息',
            eventStatus: "", //          '事件处理状态编码类型，见编码状态类型表',
            eventCheckStatus:'',
            netGridID: 1
          },
          {
            disputeEventID: 20171013, // 服务单号
            eventName: "酒后驾车", // 事件名称
            eventDate: "2017-12-12", // 发生日期
            eventPlace: "", // 事件发生地点
            majorPersonName: "张三", // 主要当事人姓名
            reviewType: "02", // 督办类型（编码）
            reviewComments: "黄牌督办" // 督办内容
          }
        ],
        totalNeedDeal: 100,
        currentRow: null,
        EventType: []
      };
    },
    methods: {
      editEvent(id) {
        this.$router.push({
          path: 'editMDEvent',
          query: {
            id: id
          }
        })
      },
      flush() {
        for (var key in this.filters) {
          this.filters[key] = null
        }
        this.filters.page = 1
        this.filters.pageSize = 10
        this.find()
      },
      remove(id) {
        this.$confirm("是否删除此事件记录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          api.deleteDisputeEvent(id).then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.find()
            }
          });
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      },
      GetNodeValue(id) {
        this.filters.netGridID = id;
        this.find();
      },
      handleNodeClick(data) {
        console.log(data);
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      checkDetail(row) {
        this.$router.push({
          path: "checkDetail",
          query: {
            id: row.disputeEventID
          }
        });
      },
      find() {
        api.getAllDispute(this.filters).then(res => {
          this.needDealEvents = res.data.disputeEvents;
          this.totalNeedDeal = res.data.page.totalCount;
        });
      }
    },
    mounted() {
      this.find();
      api2.fetchServedPersonManageTypes().then(res => {
        this.EventType = res.data.codeEventType;
      });
    }
  };

</script>

<style>
  .is-current {
    /* background-color: #1D8CE0; */
    color: #1d8ce0;
    font-weight: 1200;
  }

  .el-table-row,
  .current-row {
    background-color: #1d8ce0;
  }

   ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #f5f5f5;
    border-radius: 10px;
  }

   ::-webkit-scrollbar {
    /* width: 10px; */
    background-color: #f5f5f5;
  }

   ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-image: -webkit-gradient( linear,
    left bottom,
    left top,
    color-stop(0.44, rgb(211, 211, 211)),
    color-stop(0.72, rgb(211, 211, 211)),
    color-stop(0.86, rgb(211, 211, 211)));
  }

</style>
